<template>
	<view class="city_info">
		<view class="city_search">
			<view class="search_left">
				<input v-model="searchValue" placeholder="搜索城市" placeholder-style="font-size:28rpx" type="text" @confirm="searchCity">
				<image :src='STATIC_URL+"96.png"' mode="aspectFill"></image>
			</view>
			<view class="search_right" @tap.stop="searchCity">
				<text>搜索</text>
			</view>
		</view>
		<view class="city_list">
			<template v-if="is_open == 1">
				<view class="city_item" v-for="(v, k) in cityList" :key="k" @tap.stop="goCity(v.name)">
					<text>{{v.name}} ({{v.nums}})</text>
				</view>
			</template>
			<template v-if="is_open == 0">
				<template v-for="(v, k) in cityList">
					<view class="city_item" v-if="k < 4" :key="k" @tap.stop="goCity(v.name)">
						<text>{{v.name}} ({{v.nums}})</text>
					</view>
				</template>
			</template>
		</view>
		<view class="city_status" v-if="cityList.length > 4" @tap.stop="selectAll">
			<text style="margin-right: 8rpx;" v-if="is_open == 0">全部城市</text>
			<text style="margin-right: 8rpx;" v-if="is_open == 1">收起</text>
			<u-icon v-if="is_open == 1" color="#999" name="arrow-up" size="20"></u-icon>
			<u-icon v-if="is_open == 0" color="#999" name="arrow-down" size="20"></u-icon>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			country: {
				type: Object,
				default: {}
			}
		},
		data() {
			return {
				searchValue: "",
				cityList: [],  // 城市列表
				is_open: 0,
			}
		},
		created() {
			this.getCity();
		},
		methods: {
			// 城市列表  post64799f8956050
			getCity() {
				this.$api.post(global.apiUrls.post64799f8956050, {
					country_id: this.country.id,
					keyword: this.searchValue
				}).then(res => {
					// console.log(res);
					if (res.data.code == 1) {
						this.cityList = res.data.data;
					} else {
						this.$message.info(res.data.msg);
					}
				})
			},
			selectAll() {
				if (this.is_open == 0) {
					this.is_open = 1;
				} else {
					this.is_open = 0;
				}
			},
			searchCity() {
				this.getCity();
			},
			// 搜索城市
			goCity(name) {
				uni.navigateTo({
					url: '/pages/home/screen/screen?country=' + this.country.name + '&city=' + name
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.city_info {
		background: #fff;
		border-radius: 16rpx;
		padding: 32rpx 24rpx;
		margin: 0 32rpx;
	
		.city_search {
			height: 72rpx;
			background: #F8F8F8;
			border-radius: 12rpx;
			display: flex;
	
			.search_left {
				position: relative;
				flex: 1;
	
				input {
					height: 72rpx;
					padding: 0 32rpx 0 74rpx;
					font-size: 26rpx;
				}
	
				image {
					width: 28rpx;
					height: 28rpx;
					position: absolute;
					left: 32rpx;
					top: 24rpx;
				}
			}
	
			.search_right {
				width: 97rpx;
				height: 60rpx;
				line-height: 60rpx;
				text-align: center;
				background: #8B060D;
				border-radius: 12rpx;
				font-size: 28rpx;
				color: #fff;
				transform: translateY(6rpx);
			}
		}
	
		.city_list {
			display: flex;
			flex-wrap: wrap;
	
			.city_item {
				display: flex;
				align-items: center;
				width: 50%;
				color: #666666;
				font-size: 24rpx;
				margin-top: 24rpx;
				padding: 0 24rpx;
				text {
					overflow: hidden;
					text-overflow: ellipsis;
					/* 弹性伸缩盒子模型显示 */
					display: -webkit-box;
					-webkit-line-clamp: 1;
					-webkit-box-orient: vertical;
				}
			}
		}
		.city_status {
			font-size: 24rpx;
			color: #999;
			text-align: center;
			margin-top: 24rpx;
		}
	}
</style>